p{
    margin: 0;
}
.head{
    height: 51px;
    width: 100%;
    min-width: 1366px;
    padding:0 20px;
    border: 1px solid #C5CCCB;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}
.head:hover{
    overflow: visible;
}
.head.slide-up-leave-active:hover,
.head.slide-up-enter-active{
    overflow: hidden;
}
.hide{
    overflow: hidden;
}
.head .fileName{
    width: 680px;
    float: left;
    line-height: 50px;
}
.head .fileName .logo{
    display: inline-block;
    float: left;
    width: 40px;
    height: 50px;
    background: url("/assstatic/images/logo.png") no-repeat left center;
}
.head .fileName .name{
    display: inline-block;
    text-align: left;
    float: left;
    width: 460px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    font-size: 16px;
}
.head .info{
    width: 240px;
    float: right;
    line-height: 50px;
    text-align: center;
}
.head .info>span{
    display: inline-block;
    /*width: 60px;*/
    margin-right: 10px;
}
.head .headBtn{
    /*width: 350px;*/
    float: right;
    text-align: right;
}
.head .theme{
    display: inline-block;
    width: 20px;
    height: 14px;
    position: relative;
    top: 2px;
    background: url("") no-repeat center center;
}
.saveBtn{
    display: inline-block;
    background: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 2px;
    /*width: 100px;*/
    padding:0 26px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    margin-top: 11px;
    margin-right: 10px;
    /*float: right;*/
}
.submitBtn{
    background: #14CB6B;
    border: 1px solid #14CB6B;
    color: #fff
}
.warnBtn{
    background: #FF6750;
    color: #fff;
    border: 1px solid #FF6750;
}
/*快捷键*/
.shortcut{
    position: relative;
    cursor: pointer;
    word-break: break-word;
}
.shortcut:hover .showBox{
    display: block;
}

.shortcut .showBox{
    position: absolute;
    background: #fff;
    width: 300px;
    padding: 10px;
    -webkit-box-shadow: 0 0 10px rgba(155,155,155,0.5);
    -moz-box-shadow: 0 0 10px rgba(155,155,155,0.5);
    -ms-box-shadow: 0 0 10px rgba(155,155,155,0.5);
    -o-box-shadow: 0 0 10px rgba(155,155,155,0.5);
    box-shadow: 0 0 10px rgba(155,155,155,0.5);
    z-index: 999;
    border-radius: 3px;
    top:50px;
    transform: translateX(-85%);
    display: none;
}
.history{
    cursor: pointer;
}
.showBox:before {
    content: "";
    position: absolute;
    top: -14px;
    right: 38px;
    border-width: 7px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #fff transparent;
    font-size: 0;
    line-height: 0;
}
/*.showBox table{*/
    /*width: 100%;*/
    /*line-height: 20px;*/
/*}*/
.shortcut .showBox .table{
    width: 100%;
    max-height:180px ;
    overflow: hidden;
}

.shortcut .showBox .table div:after {
    content: '';
    display: table;
    clear: both;
}

.cut .showBox{
    transform: translateX(-78%);
    padding:0 10px;
}
.cut .showBox .table span{
    display: inline-block;
    width: 50%;
    float: left;
    text-align: center;
    line-height: 40px;
}
.cut .showBox .table span i{
    display: inline-block;
    padding: 3px 10px;
    background-image: linear-gradient(-180deg, #F0F0F0 0%, #E2E2E2 100%);
    border-radius: 2px;
    height: 20px;
    line-height: 15px;
    font-size: 12px;
}

.rule {
    color: #000;
    line-height: 20px;
    text-align: left;
    line-height: 50px;
    height:50px;
}
.rule .showBox{
    line-height: 20px;
    max-height: 200px;
    width: 500px;

}
.rule .showBox .box{
    max-height: 180px;
    padding:10px 0;
    overflow: hidden;
}
.rule .showBox .box img{
    width:100%;
}
.tool{
    /*overflow: hidden;*/
    height: 50px;
    position: relative;
    min-width: 1366px;
    line-height: 50px;
    padding:0 20px;
    background: #F3F5F6;
    border-bottom: 1px solid #C6CDCC;
    box-shadow: inset 2px 2px 2px 0 #FFFFFF, inset 0 0 10px 0 rgba(9,22,22,0.06);
}
/*改样式*/
.tool>div{
    float: left;
    /*padding-left:30px ;*/
    cursor: pointer;
    margin-left: 40px;
}
.tool div:before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top:2px;
}
.tool .file{
    padding-left: 0px;
    margin-left: 0;
}
.fileList{
    position: absolute;
    float: left;
    z-index: 999;
    background: #F3F5F6;
    width: 200px;
    left: 0px;
    top:101px;
    height:calc(100% - 100px);
    overflow: hidden;
    transition: top 0.15s ;
    border-right: 1px solid #DADBDB;
}
.fileList.h{
    transition: top 0.15s ;
    height:calc(100% - 50px);
    top:50px;
}
.fileList .title{
    border-bottom: 1px solid #EBEBEB;
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding-left: 20px;
    color: #666;
    background: #F3F5F6;
}
.fileList .close{
    float: right;
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    width: 20px;
    height: 40px;
    background: url("/assstatic/images/changyuliu/close.svg") no-repeat 2px 19px;
}
.fileList .fileLists{
    height:calc(100% - 50px);
    overflow: hidden;
    margin-top: 10px;
    padding-bottom: 10px;
}
.mCSB_scrollTools{
    right: 0;
}

.fileList  li{
    font-weight: bold;
    width: 100%;
    color: red;
    height: 32px;
    line-height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #9C9C9C;
    cursor: pointer;
    padding:0 20px;
}
.fileList .fin{
    color: #333;
}
.fileList .error{
    color: #C76F7A;
}
.fileList .cur{
    color: #1BCC70;
}


.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .3s ease;
}
.slide-fade-enter, .slide-fade-leave-to{
    transform: translateX(-100%);
}

.tool .file:before{
    background: url("/assstatic/images/changyuliu/file.svg") no-repeat 0px 7px;
}
.tool .file:hover{
    color: #1BCC70;
}
.tool .file:hover:before{
    background: url("/assstatic/images/changyuliu/file-hov.svg") no-repeat 0px 7px;
}
.tool .progress:before{
    background: url("/assstatic/images/changyuliu/progress.svg") no-repeat 0px 7px;
}
.tool .allFile:before{
    background: url("/assstatic/images/changyuliu/allFile.svg") no-repeat 0px 7px;
}
.tool .allFile:after{
    background: url("/assstatic/images/changyuliu/allSlide.svg") no-repeat 1px 2px;
}

.tool .prevData:before{
    background: url("/assstatic/images/changyuliu/prev.svg") no-repeat 0px 7px;
}
.tool .prevData:hover{
    color: #1BCC70;
}
.tool .prevData:hover:before{
    background: url("/assstatic/images/changyuliu/prev-hov.svg") no-repeat 0px 7px;
}

.tool .nextData:before{
    background: url("/assstatic/images/changyuliu/next.svg") no-repeat 0px 7px;
}
.tool .nextData:hover{
    color: #1BCC70;
}
.tool .nextData:hover:before{
    background: url("/assstatic/images/changyuliu/next-hov.svg") no-repeat 0px 7px;
}

.tool .badData:before{
    background: url("/assstatic/images/changyuliu/badFile.svg") no-repeat 0px 6px;
}
.tool .badData:hover{
    color: #1BCC70;
}
.tool .badData:hover:before{
    background: url("/assstatic/images/changyuliu/badFile-hov.svg") no-repeat 0px 6px;
}

.tool .badData.r:before{
    background: url("/assstatic/images/changyuliu/goodFile.svg") no-repeat 0px 6px;
}
.tool .badData.r:hover:before{
    background: url("/assstatic/images/changyuliu/goodFile-hov.svg") no-repeat 0px 6px;
}
.tool .badData.r:hover{
    color: #1BCC70;
}
.tool .slide{
    float: right;
    padding-left: 15px;
    height: 15px;
    margin-top: 15px;
    position: relative;
    right: 15px;
    position: absolute;
}
.tool .slide{
    width: 20px;
    height: 20px;
}
.tool .slide{
    background: url("/assstatic/images/changyuliu/slide.svg") no-repeat 5px 6px;
    overflow: hidden;
}
.slide-up-enter-active {
    transition: all .15s;
}
.slide-up-leave-active {
    transition: all .15s ;
}
.slide-up-enter, .slide-up-leave-to{
    height: 0;
}


.tool .line{
    float: right;
    padding-left: 15px;
    height: 15px;
    margin-top: 18px;
    margin-right: 20px;
    border-right:1px solid #DADBDB;
    position: absolute;
    right: 26px;
}
.aa{
    transition: all 0.3s;
    top: 0px;
}
.go{
    transform:rotate(-180deg);
    transition: all 0.3s;
    top:0px;
}
.allFile{
    position: relative;
}
.allFile>span{
    display: inline-block;
    width: 56px;
    text-align: center;
}
.allFile:hover .fileType{
    display: block;
}
.allFile .fileType{
    position: absolute;
    display: none;
    width: 100px;
    height: 125px;
    background: #fff;
    z-index: 9999;
    left: 25px;
    padding:5px 2px;
    border-radius: 3px;
    top: 40px;
}
.allFile .fileType li{
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid #EAF0F0;
}
.allFile .fileType li:last-child{
    border-bottom: 1px solid #fff;
}
.allFile .fileType li:hover{
    color: #14CB6B;
}
.allFile:after{
    display: inline-block;
    width: 15px;
    height: 15px;
    content: '';
}
.mCSB_scrollTools{
    width: 4px !important;
    right: 0px !important;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width: 4px !important;
}
.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools, .mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools, .mCustomScrollBox:hover>.mCSB_scrollTools, .mCustomScrollBox:hover~.mCSB_scrollTools, .mCustomScrollbar>.mCustomScrollBorollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background: rgba(0,0,0,0)}

/* 黑色主题样式*/
.dark-theme .tool{
    background: #21232A;
    border: 1px solid #21232A;
    box-shadow: none;
    color: #909193;
}
.dark-theme .tool .file:hover{
    color: #CACBCB;
}
.dark-theme .allFile .fileType{
    background: #21232A;
}
.dark-theme .allFile .fileType li{
    border-bottom:1px solid  rgba(54,54,55,1);
}
.dark-theme .head{
    background:linear-gradient(180deg,rgba(63,63,65,1) 0%,rgba(54,54,56,1) 100%);
    box-shadow:0px -5px 15px 0px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    color: #CFD0D2;
}
.dark-theme .head .fileName .name,.dark-theme .rule{
    color: #CFD0D2;
}
.dark-theme .tool .line{
    border-color: #575859;
}
.dark-theme .saveBtn{
    background:linear-gradient(180deg,rgba(112,114,119,1) 0%,rgba(100,102,107,1) 100%);
    box-shadow:0px 1px 1px 0px rgba(100,102,107,1);
    border: 1px solid rgba(100,102,107,1);
    color: #CFD0D2;
}
.dark-theme .showBox:before{
    border-color: transparent transparent #21232A transparent;
}
.dark-theme .shortcut .showBox{
    background: #21232A;
    color: #CACBCB !important;
}
.dark-theme .cut .showBox .table span i {
    background: #000;
}
.dark-theme .theme{
    background-image:url("") ;
}
.dark-theme .fileList{
    background: #2E3137 ;
    border: 1px solid rgba(54,54,55,1);
}
.dark-theme .fileList .title{
    background: #282829;
    border: 1px solid rgba(54,54,55,1);
}
.dark-theme .fileList .fin{
    color: #666;
}
.dark-theme .fileList .cur {
    color: #1BCC70;
}

